import React, { useState, useEffect } from 'react'
import { Layout, Menu, Breadcrumb, Input, Collapse, Button } from 'antd';
import { connect, useDispatch, useSelector } from "react-redux"
import { AddTodolistAC, UpdateOldTimeAC } from '../../../redux/actions/todolIstAc'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import TodoList from './TodoList'
import MyEventListener from '../../../utils/bus'
import Default from '../today/item/Default'
import {Switch,Route,Redirect} from 'react-router'
export default function RecentDay(props) {
    const dispatch = useDispatch()
    const [collapsed, setcollapsed] = useState(false)
    const { Header, Content, Sider } = Layout;
    const result = useSelector(state => {
        return {
            todolistData: state.todoRC.todolist
        }
    })
    // const toggle = () => {
    //     setcollapsed(!collapsed);
    // };

    //获得输入框内容,并存储到仓库
    const getContent = (e) => {
        console.log(e.target.value);
        let count = result.todolistData.length
        dispatch(AddTodolistAC({
            id: ++count,
            title: e.target.value,
            createTime: new Date().toLocaleDateString(),
            oldTime: false,
            done: false,
        }))
    }

    //挂载
    useEffect(() => {
        console.log(props);
        console.log('result', result);
        //当天时间和各个任务时间进行一个对比，并修改是否过期
        dispatch(UpdateOldTimeAC(new Date().toLocaleDateString()))
    }, [])

    const toggleC = () => {
        MyEventListener.emit("toggle", !collapsed)
        setcollapsed(!collapsed)
    }
    return (
        <div>
            <Content
                className="site-layout-background"
                style={{
                    margin: 0,
                    minHeight: 280,
                    paddingTop: 0,
                    backgroundColor: 'black',
                    display: 'flex'
                }}
            // theme='light'
            >
                <Layout style={{ flexGrow: 6, borderRight: '1px solid rgb(243,243,243)', padding: '0 20px 0', backgroundColor: 'white' }}>
                    <Header className="site-layout-background" style={{ padding: '0', backgroundColor: 'white', fontSize: '17px' }}>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            // onClick:()=>{ MyEventListener.emit("toggle")}
                            onClick: toggleC
                        })}
                        <span style={{ fontSize: '20px' }}> 最近7天</span>
                    </Header>
                    <Input onPressEnter={getContent} placeholder='+ 添加"今天"的任务至收集箱' style={{ borderRadius: '5px', height: '38px' }}>
                    </Input>
                    <TodoList></TodoList>
                </Layout>
                <Layout style={{ width: '200px', backgroundColor: 'white', flexGrow: 4 }}>
                    <Switch>
                        <Redirect exact from='/task/recentday' to='/task/recentday/default'></Redirect>
                        <Route path='/task/recentday/default' component={Default}></Route>
                        {/* <Route path='/task/today/item/:id' component={Item}></Route> */}
                    </Switch>
                </Layout>

            </Content>

        </div>
    )
}
